<template>
  <div class="rank">
    <div class="nav">
      <div class="left">
        <van-icon name="arrow-left"  size="14" @click="goBack"/>
        排行榜
      </div>
      <div class="right">
        <van-icon name="ellipsis" />
      </div>
    </div>
    <van-tabs v-model="active" scrollspy sticky>
      <!-- 官方 -->
      <div class="frame">
        <van-tab title="官方">
          <h1 class="top">官方榜</h1>
          <div class="index-gf" v-for="item in gf" :key="item.id">
            <router-link :to="{ name: 'ranklist', query: { id: item.id } }" class="active">
            <span>{{item.updateFrequency}}</span>
            <div class="list-img"><img :src="item.coverImgUrl" alt=""></div>
            <div class="list-songs">
                <div>1.{{item.tracks[0].first}}--{{item.tracks[0].second}}</div>
                <div>2.{{item.tracks[1].first}}--{{item.tracks[1].second}}</div>
                <div>3.{{item.tracks[2].first}}--{{item.tracks[2].second}}</div>
            </div>
            </router-link>
          </div>
        </van-tab>
      </div>
      <!-- 云音乐 -->
      <div class="frame">
        <van-tab title="云音乐">
          <h1 class="top">云音乐</h1>
          <div class="index-list">
            <router-link :to="{ name: 'ranklist', query: { id: item.id } }" v-for="item in ymusic" :key="item.id" class="index-box">
                <div class="list-img"><img :src="item.coverImgUrl" alt=""></div>
                <div>{{item.name}}</div>
            </router-link>
          </div>
        </van-tab>
      </div>
      <!-- 曲风 -->
      <div class="frame">
        <van-tab title="曲风">
          <h1 class="top">曲风</h1>
          <div class="index-list">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in quf"
              :key="index"
              class="index-box"
            >
                <div class="list-img"><img :src="item.coverImgUrl" alt=""></div>
                <div>{{item.name}}</div>
            </router-link>
          </div>
        </van-tab>
      </div>
      <!-- 全球 -->
      <div class="frame">
        <van-tab title="全球">
          <h1 class="top">全球</h1>
          <div class="index-list">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in globe"
              :key="index"
              class="index-box"
            >
                <div class="list-img"><img :src="item.coverImgUrl" alt=""></div>
                <div>{{item.name}}</div>
            </router-link>
          </div>
        </van-tab>
      </div>
      <!-- MV -->
      <div class="frame">
        <van-tab title="MV">
          <h1 class="top">MV</h1>
          <div class="index-list">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in mv"
              :key="index"
              class="index-box"
            >
                <div class="list-img"><img :src="item.coverImgUrl" alt=""></div>
                <div>{{item.name}}</div>
            </router-link>
          </div>
        </van-tab>
      </div>
      <!-- 特色 -->
      <div class="frame under">
        <van-tab title="特色">
          <h1 class="top">特色</h1>
          <div class="index-list">
            <router-link
              :to="{ name: 'ranklist', query: { id: item.id } }"
              v-for="(item, index) in ts"
              :key="index"
              class="index-box"
            >
                <div class="list-img"><img :src="item.coverImgUrl" alt=""></div>
                <div>{{item.name}}</div>
            </router-link>
          </div>
        </van-tab>
      </div>
    </van-tabs>
  </div>
</template>

<script>
import { ToplistApi } from "../../api/home"
export default {
  data() {
    return {
      active:"",
      gf: [],
      ymusic: [],
      quf: [],
      globe: [],
      mv: [],
      ts: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async getTopList(){
      const res = await ToplistApi();
      console.log(res.data.list);
      if (res.data.code === 200) {
        //官方
        this.gf = res.data.list.slice(0, 4);
        //云音乐
        this.ymusic = res.data.list.slice(5, 10);
        this.ymusic.push(res.data.list[16]);
        //曲风
        this.quf.push(
          res.data.list[17],
          res.data.list[19],
          res.data.list[20],
          res.data.list[21],
          res.data.list[23],
          res.data.list[24],
          res.data.list[25],
          res.data.list[27],
          res.data.list[28]
        );
        //全球榜
        this.globe.push(
          res.data.list[4],
          res.data.list[10],
          res.data.list[11],
          res.data.list[12],
          res.data.list[13],
          res.data.list[14],
          res.data.list[15],
          res.data.list[18],
          res.data.list[22],
          res.data.list[26],
          res.data.list[32]
        );
        //MV榜
        this.mv.push(res.data.list[33]);
        //特色榜
        this.ts.push(
          res.data.list[29],
          res.data.list[30],
          res.data.list[31],
          res.data.list[34]
        );
      }
      console.log(this.quf);
    },
    goBack(){
        this.$router.go(-1);
    }
  },
  created() {
    this.getTopList();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.rank{
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
}
.frame{
    width: 100%;
    min-height: 120px;
    background-color: #fff;
    margin: 5px 0;
    border-radius: 15px;
}
.nav{
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    line-height: 50px;
}
.nav .left{
    float: left;
    padding-left: 20px;
    font-size: 14px;
}
.nav .right{
    float: right;
    padding-right: 20px;
}
.list-img{
    width: 80px;
    height: 80px;
}
.list-img img{
    width: 80px;
    height: 80px;
    border-radius: 12px;
}
h1{
    width: 90%;
    height: 50px;
    line-height: 60px;
    font-size: 20px;
    padding-left: 16px;
    font-weight:600;
}
.index-gf{
    padding: 10px 20px;
    position: relative;
}
.index-gf .active{
    display: flex;
}
.index-gf span{
    position: absolute;
    font-size: 12px;
    color: #fff;
    top: 72px;
    left: 35px;
}
.list-songs{
    padding: 7px 15px 10px;
    font-size: 12px;
    color: #000;
    line-height: 20px;
}
.index-list{
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
}
.index-list .index-box{
    width: 33.3%;
    text-align: center;
}
.index-list .list-img{
    padding-left: 16px;
}
.index-list div{
    font-size: 12px;
    color: black;
    padding-top: 7px;
}
.under{
    margin-bottom: 50px;
}
</style>
